<template>
  <div class="app-container">
    <el-table
        :data="tableData"
        border
        style="width: 100%"
        v-loading="loading"
    >
      <el-table-column prop="username" label="申请人" width="120" />
      <el-table-column prop="projectName" label="项目名称" width="180" />
      <el-table-column prop="projectType" label="项目类型" width="120" />
      <el-table-column prop="supervisor" label="指导老师" width="120" />
      <el-table-column prop="reviewer" label="评审专家" width="120" />

      <el-table-column label="项目概述" width="200">
        <template #default="{row}">
          <el-popover
              placement="top-start"
              width="400"
              trigger="hover"
              :content="row.projectOverview">
            <template #reference>
              <div class="text-ellipsis">{{ row.projectOverview }}</div>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="团队介绍" width="200">
        <template #default="{row}">
          <el-popover
              placement="top-start"
              width="400"
              trigger="hover"
              :content="row.teamIntroduction">
            <template #reference>
              <div class="text-ellipsis">{{ row.teamIntroduction }}</div>
            </template>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="计划书" width="120">
        <template #default="{row}">
          <el-link
              :href="row.businessPlan"
              target="_blank"
              type="primary"
          >
            下载查看
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="gitee仓库地址" width="120">
        <template #default="{row}">
          <el-link
              :href="row.gitRepo"
              target="_blank"
              type="primary"
          >
            去往仓库
          </el-link>
        </template>
      </el-table-column>
      <el-table-column prop="contactEmail" label="联系邮箱" width="150" />

      <el-table-column prop="state" label="状态" width="100">
        <template #default="{row}">
          <el-tag :type="stateTagType(row.state)">
            {{ stateText(row.state) }}
          </el-tag>
        </template>
      </el-table-column>

    </el-table>
    <div style="margin-top: 20px; text-align: center">
      <el-pagination
          background
          :current-page="pageNum"
          :page-size="pageSize"
          :page-sizes="[9]"
      layout="total, prev, pager, next"
      :total="total"
      @current-change="handlePageChange"
      />
    </div>
  </div>

</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      pageNum: 1,     // 当前页码
      pageSize: 9,    // 每页显示数量
      total: 0,        // 总数据量
      loading: false,
      programVisible: false,
      submitting: false,
      tableData: []
    };
  },
  form: {
    id: null,
    projectName: '',
    projectType: '',
    supervisor: '',
    reviewer: '',
    projectOverview: '',
    teamIntroduction: '',
    contactEmail: '',
    gitRepo: ''
  },

  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        this.loading = true;
        const res = await this.$request.get('/project/card', {
          params: {  // 添加分页参数
            pageNum: this.pageNum,
            pageSize: this.pageSize
          }
        });


          this.tableData = res.data?.records || [];
          this.total = res.data?.total || 0;

      } catch (error) {
        console.error('获取数据失败:', error);
        this.$message.error('数据加载失败');
      } finally {
        this.loading = false;
      }
    },
    handlePageChange(val) {
      this.pageNum = val;
      this.fetchData();
    },
    stateText(state) {
      const statusMap = {
        0: '待审核',
        1: '已通过',
        2: '已拒绝'
      };
      return statusMap[state] || '未知状态';
    },
    stateTagType(state) {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      };
      return typeMap[state] || 'info';
    },
  }
};
</script>

<style scoped>
.app-container {
  padding: 20px;
}
.text-ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>